
import { useEffect, useState } from 'react'

import {getBannerList, getProList} from '../api/home'

// useSelector: 是用来获取全局状态的方法
// useDispatch: 是用来触发修改全局状态函数的方法
import { useSelector, useDispatch } from 'react-redux'

// 导入修改全局状态的方法
// import { changeBannerList,changeProList } from '../store/modules/home'

// 导入异步方法
import { getBannerListAction, getProListAction } from '../store/modules/home'


const Home = ()=>{
    // 创建 dispatch 方法
    const dispatch = useDispatch()

    // useState 该 hooks 是用来定义一个响应式数据(状态)用的
    // [数据源,修改数据的方法]
    // const [bannerList,setBannerList] = useState([])
    // const [proList, setProList] = useState([])

    // 获取全局状态
    const bannerList = useSelector(state => state.home.bannerList)
    const proList = useSelector(state => state.home.proList)

    // useEffect 可以理解为类组件中的生命周期函数，可以模拟 挂载，更新，和卸载
    useEffect(()=>{
        // 无参数的异步执行，执行时不需要添加 () 
        dispatch(getBannerListAction)
        // 有参数的时候需要加 () 将参数通过函数调用的方式进行传递
        dispatch(getProListAction({limitNum: 8}))
    }, [])

    return (<div>
        
        {
            bannerList && bannerList.map(item => {
                return <img src={item.img} key={item.bannerid} style={{width: 150}} />
            })
        }
        
        <ol>
            {
                proList && proList.map(item => <li key={item.proid}>{item.proname}</li>)
            }
        </ol>
    </div>)
}

export default Home